<template xmlns="http://www.w3.org/1999/html">
  <div class="login">
    <!-- 双向绑定：绑定 登录数据项 和 验证规则 -->
    <el-form class="center-form">
      <h1 class="title">
        点点乐抽奖平台
      </h1>
      <h3>欢迎用户：</h3>
      <span>{{ getUserName }}</span>
      <el-form-item style="display: flex; justify-content: center; align-items: center;">
        <div class="stacked-elements">
          <span class="number">免费积分：{{ getFreeCount }}</span>
          <span class="number">额外积分：{{ getExtraCount }}</span>
          <span class="number">{{ resultMessage }}</span>
          <el-button @click="click">
            <span>试 试 手 气</span>
          </el-button>
          <el-button @click="logout">
            <span>退 出 登 录</span>
          </el-button>
          <el-button @click="test">
            <span>测 试 按 钮</span>
          </el-button>
        </div>
      </el-form-item>
      <button @click="goToRecord">中 奖 记 录</button>
    </el-form>
    <!--  底部  -->
    <!--    <div v-if="$store.state.settings.showFooter" id="el-login-footer">-->
    <!--      <span v-html="$store.state.settings.footerTxt" />-->
    <!--      <span v-if="$store.state.settings.caseNumber"> ⋅ </span>-->
    <!--      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>-->
    <!--    </div>-->
  </div>
</template>

<script>

  import {test} from "@/api/auth";

  export default{
    computed: {
      getUserName() {
        return this.$store.state.user.username
      },
      getClickResult() {
        return this.$store.state.game.clickResult
      },
      getFreeCount() {
        if (this.$store.state.game.currentFreeCount !== null && this.$store.state.game.currentFreeCount !== undefined
            && this.$store.state.game.currentFreeCount !== '')
          return this.$store.state.game.currentFreeCount
        else
          return this.$store.state.user.freeCount
      },
      getExtraCount() {
        if (this.$store.state.game.currentExtraCount !== null && this.$store.state.game.currentExtraCount !== undefined
            && this.$store.state.game.currentExtraCount !== '')
          return this.$store.state.game.currentExtraCount
        else
          return this.$store.state.user.extraCount
      },
      resultMessage() {
        // 创建一个映射对象，将result值映射到对应的消息
        const messageMap = {
          0: '没有抽中，再试一次吧',
          1: '恭喜抽中，奖励积分',
          2: '罚时10s',
          '-2': '正在罚时',
          '-1': '次数不足，请充值'
        };

        // 使用Vue 3的Composition API，或者Vue 2的this.$store.state.result
        // 假设这里使用Vue 2的语法
        const result = this.$store.state.game.clickResult

        // 返回映射对象中对应的消息，或者空字符串（如果result不在映射中）
        return messageMap[result] || '';
      }
    },
    created() {
      this.getUserInfo()
      // console.log("获取用户信息 " + $store.state.user.username)
    },
    methods: {
      goToRecord() {
        this.$router.push('/record'); // 或者使用命名路由：this.$router.push({ name: 'PageB' });
      },
      test() {
        test('admin', '0', '4').then().catch()
      },
      logout() {
        this.$store.dispatch('LogOut').then(() => {
          console.log("退出登录")
          this.$router.push({ path: '/login' })
        })
      },
      getUserInfo() {
        this.$store.dispatch('GetUserInfo').then(() => {
          // console.log("获取用户信息")
        })
      },
      click() {
        this.$store.dispatch('Click', this.$store.state.user.username).then(() => {
          console.log("aaaaaa")
        }).catch(() => {
          console.log("sss")
        })
      }
    }
  }
</script>

<style>
.center-form {
  display: flex;
  flex-direction: column; /* 默认为column，但明确指定总是好的 */
  align-items: center; /* 垂直居中，如果需要的话 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 如果需要占据整个视口高度 */
}

.el-form-item {
  /* 如果el-form-item有默认的margin或padding，你可能需要重置它们 */
  margin: 0;
  padding: 0;
}
.stacked-elements {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.number {
  /* 根据需要调整样式，比如字体大小、颜色、位置等 */
  font-size: 16px;
  margin-bottom: 5px; /* 与按钮之间的距离 */
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}
.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 385px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon{
    height: 39px;width: 14px;margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;
  img{
    cursor: pointer;
    vertical-align:middle
  }
}
</style>